<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<jsp:include page="header.jsp" />
<script>
			$(document).ready(function(){
				 $('#btnSubmit').on('click',function () {
				        checkForm();
				    });

				    $('#username').on('blur', function () {
				        var url = "${ContextPath}username_available";
				        var username = $('#username').val();
				        if (username === "")
				            return;
				        $.get(url,
				                {"username": username},
				                function (data) { //匿名函数
				                    if (data == 1) {
				                        $('#uinfo').text("用户名可用");
				                        $('#uinfo').css("color", "blue");
				                    } else {
				                        $('#uinfo').text("用户名不可用");
				                        $('#uinfo').css("color", "red");
				                        $('#username').focus();
				                    }
				                }
				        );
				    });
			});

            function checkForm() {
                var username = $("#username").val();
                var truename = $('#truename').val();
                var pass1 = $("#passwd1").val();
                var pass2 = $("#passwd2").val();
                var email = $("#email").val();
                if (username === "" || truename==="" || pass1 === "" || pass2 === "" || email === "") {
                    alert("表单填写不完整");
                    return;
                }
                if (pass1 !== pass2) {
                    alert("密码不相符");
                    return;
                }
                if (username.length < 6 || username.length > 16) {
                    alert("用户名长度不满足要求");
                    return;
                }
                if (pass1.length < 6 || pass1.length > 16) {
                    alert("密码长度不满足要求");
                    return;
                }
//                if(!isValidEmailAddress(email)){
//                    alert("电子邮件地址不正确");
//                    return;
//                }
                $('#form1').submit();
            }

            function isValidEmailAddress(emailAddress) {
                var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
                return pattern.test(emailAddress);
            }
        </script>
<div class="section" style="min-height: 80vh">
	<div class="container">
		<div class="row">
			<div class="col-md-4"></div>
			<div class="col-md-4">
			<form action="${ContextPath}register" method="post" id="form1"
				class="form-horizontal">
				<div class="form-group">
					<div class="col-sm-12 text-left" style="font-size: 24px">
						用户注册<br />
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label" for="username">用户名</label>
					<div class="col-sm-9">
						<input type="text" class="form-control" name="username"
							id="username" required> <span id="uinfo"></span>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label" for="truename">真实姓名</label>
					<div class="col-sm-9">
						<input type="text" class="form-control" name="truename"
							id="truename" required> <span id="uinfo"></span>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label" for="passwd">密码</label>
					<div class="col-sm-9">
						<input type="password" class="form-control" name="password"
							id="passwd1" required>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label" for="passwd2">重复密码</label>
					<div class="col-sm-9">
						<input type="password" class="form-control" name="password2"
							id="passwd2" required>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label" for="name">电子邮箱</label>
					<div class="col-sm-9">
						<input type="email" class="form-control" name="email" id="email"
							required>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-12 text-right">
						<button class="btn btn-primary btn-lg" type="button"
							id="btnSubmit">注册</button>
					</div>
				</div>
			</form>
			</div>
			<div class="col-md-4"></div>
		</div>
	</div>
</div>
<jsp:include page="footer.jsp" />
